<template>
    <div class="online-exam">
        <template v-if="list.length > 0">
            <div v-for="(item,index) in list" :key="index">
                <div class="single-warpper" v-if="item.resType === 2" @click="beforeGoDetail(item)">
                    <div class="tag" :class="{exam: item.resType === 2}">
                        {{item.resType === 1 ? $t('simulation_exercise') : $t('formal_xamination')}}
                    </div>
                    <div class="right-box">
                        <p class="title">{{item.resTitle}}</p>
                        <van-icon name="arrow" color="#7f7f7f" size="18"/>
                    </div>
                </div>
                <div v-if="item.attemptNbr && item.attemptNbr > 0" style="text-align: right;">
                    <van-button size="mini" @click="goToReport(item)">{{ $t('exam_report') }}</van-button>
                </div>
            </div>
        </template>
        <div v-else class="box-table white-bg" style="width:100%;height: 300px;">
            <div class="box-table-cell" style="text-align: center;">
                <div class="no-data">
                    <img src="../../../static/images/no-data.png" alt=""/>
                    <p class="color999">{{ $t("no_data") }}</p>
                </div>
            </div>
        </div>
        <van-dialog
        v-model="examTip"
        show-cancel-button
        :title="currentItem ? currentItem.resTitle : ''"
        :cancelButtonText="$t('cancel')"
        :confirm-button-text="$t('exam_start')"
        @confirm="startExam"
        class="exam-dialog"
        >
        <div style="font-size: 15px; color: #1a1a1a;">
            <div>{{ $t("mod_topic_total") }}：{{currentItem.subjectCount}}</div><!--题目总数-->
            <div style="padding: 10px 0 0;">{{ $t("mod_total_score") }}：{{currentItem.resScore}}</div><!--总分-->
            <div style="padding: 10px 0 0;word-wrap:break-word;">{{ $t("mod_time_limit") }}：{{ currentItem.modRequiredTime && currentItem.modRequiredTime > 0 ? currentItem.modRequiredTime /60 + $t("mod_time_minute") : $t("mod_unlimited_time")  }}</div><!--限时/不限时-->
        </div>
        </van-dialog>
        <!-- 人脸识别 -->
        <!-- <face-modal :visibleModal="visibleModal" @takePictures='takePictures'  @takingError='takingError' :examType='examType' :itmId='currentItem.resId' :distinguishType="'ONLINE_EXAM_FACE'" :firIdentificationWay='2'></face-modal> -->
    </div>
</template>
<script>
import {Notify, Toast} from 'vant';
export default {
    components: {
        vanToast: Toast, [Notify.Component.name]: Notify.Component},
    data() {
        return {
            examType: true,
            list: [],
            examTip: false,
            currentItem: {},
            faceInfo: {}
        };
    },
    methods: {
        /**
         * 获取课程列表 */
        getList() {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/course/online/childrenExam`,
                params: {
                    itmId: this.$route.params.itmId
                }
            }).then((res) => {
                this.list = res.data;
            });
        },
        startExam() {
            // if (JSON.parse(this.$route.query.examFaceInd)) {
            //     this.visibleModal = true;
            // } else {
            // this.$router.push({path: `/examCertified/${this.currentItem.tkhId}/${this.currentItem.resId}/${this.$route.params.itmId}`, query: {faceInfo: JSON.stringify(this.faceInfo)}});
            this.$router.push({path: `/examCertifiedDetail/${this.currentItem.tkhId}/${this.currentItem.resId}/${this.$route.params.itmId}?isOnlinExam=1`});
            // }
        },
        beforeGoDetail(item) {
            // 人脸信息采集 - 校验人脸信息是否可用：进入认证培训课程详情之前需要校验人脸信息是否可用
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/user-face-gather/check-user-face`,
                params: {
                    busId: this.$route.params.itmId,
                    type: 'TRAIN_EXAM'
                }
            }).then(res => {
                if (res.data.code === '500') {
                    Toast({message: res.data.msg, forbidClick: true});
                } else {
                    this.goDetail(item);
                }
            }).catch(err => {
                console.log('err:---', err.response.data);
            });
        },
        goDetail(item) {
            console.log('----item', item);
            if ((item.ifStartExam && item.resType === 2) || (item.ifStartTest && item.resType === 1)) {
                if (item.resType === 2) {
                    this.$axios({
                        method: 'GET',
                        url: '/app/api/trainee/course/online/checkExamOpenCount',
                        params: {
                            itmId: this.$route.params.itmId,
                            resModId: item.resId,
                            tkhId: item.tkhId
                        }
                    }).then((res) => {
                        if (res.data.errCode === 'success') {
                            this.currentItem = item;
                            // if (this.$route.query.examFaceInd) {
                            //     this.visibleModal = true;
                            // } else {
                            this.examTip = true;
                            // }
                        }
                    }).catch(err => {
                        console.log('err.response.data.errCode', err.response.data);
                        Toast(err.response.data.errMsg);
                    });
                } else {
                    this.currentItem = item;
                    this.examTip = true;
                }
            } else {
                Notify({
                    message: this.$t('not_started_or_ended'),
                    color: '#fff',
                    background: '#ffc002'
                });
            }
        },
        /**
         * 测验报告 */
        goToReport(item) {
            this.$router.push({path: `/testingCertifiedReport/${this.$route.params.itmId}/${item.tkhId}/${item.resId}?attemptNbr=${item.attemptNbr}&examIframeUsrId=${window.localStorage.getItem('usrSteUsrId')}&isOnlinExam=1`});
        }
    },
    mounted() {
        this.getList();
    }
};
</script>
<style lang="less" scoped>
.online-exam{
    background: #fff;
    margin-top: 10px;
    padding: 15px;
    .single-warpper{
        display: flex;
        margin-bottom: 15px;
        .tag{
            width:35px;
            height: 35px;
            background: #aaa;
            border-radius: 4px;
            color:#fff;
            text-align: center;
            font-size: 12px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
        }
        .exam{
            background:#F59A23;
        }
        .right-box{
            flex:1;
            display: flex;
            align-items: center;
            margin-left: 10px;
            padding: 5px 0 15px;
            border-bottom: 1px solid #eee;
            .title{
                flex:1;
                width: 100px;
                word-break: break-all;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
}
.exam-dialog {
    /deep/.van-dialog__header {
        font-size: 20px;
        text-align: initial;
        padding: 30px 40px 20px;
    }
}
/deep/.van-dialog__content {
    margin: 0 20px;
}
</style>
